<template>
  <div id="app">
    <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
      <el-tab-pane label="数据源配置" name="first">
        <Datasource/>
      </el-tab-pane>
      <el-tab-pane label="数据对比" name="second">
        <SqlCompare :dataSourceList="dataSourceList"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Datasource from './pages/Datasource.vue'
import SqlCompare from './pages/SqlCompare.vue'

export default {
  name: 'App',
  components: {
    Datasource,
    SqlCompare
  },
  data() {
      return {
        activeName: 'first',
        dataSourceList: []
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab.name)
        if (tab.name === 'second'){
          this.getDataSources();
        }
      },
      async getDataSources() {
        await this.$http.get('/datasource/')
            .then(res => {
              console.log(res.data);
              console.log(res.data.code);
              if (res.data.code === 0) {
                this.dataSourceList = res.data.data
              }
            }).catch(err => {

            })
      },
    }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 30px;
}

.el-tabs__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px !important;
  padding: 0 !important;
}
.el-tabs__nav.is-top{
  display: flex;
}
</style>
